<template>
  <div>
    <el-card class="mb">
      <el-input placeholder="请输入关键词搜索" v-model="queryform.name" style="width: 200px;margin-right: 10px;"></el-input>
      <el-button type="primary" @click="search()" plain>查询</el-button>
      <el-button type="info" @click="research()" plain>重置</el-button>
      <el-button type="warning" style="float:right" @click="add()" plain>新增</el-button>
    </el-card>
    <el-card>
      <div class="table">
        <el-tabs v-model="activeName" class="cardtab" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="未开始" name="未开始"></el-tab-pane>
          <el-tab-pane label="进行中" name="进行中"></el-tab-pane>
          <el-tab-pane label="已结束" name="已结束"></el-tab-pane>
          <el-tab-pane label="未启用" name="未启用"></el-tab-pane>

        </el-tabs>
        <el-table :data="tableData" strip>

          <el-table-column prop="id" label="序号" align="center" sortable></el-table-column>

          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == '未开始'">未开始</el-tag>
              <el-tag v-if="scope.row.status == '进行中'" type="primary">进行中</el-tag>
              <el-tag v-if="scope.row.status == '已结束'" type="success" >已结束</el-tag>
              <el-tag v-if="scope.row.status == '未启用'" type="warning">未启用</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="year" label="年度"></el-table-column>
          <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
              <el-button type="text" @click="todetal(scope.row.id)">{{ scope.row.name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" width="200" label="评测周期">
            <template slot-scope="scope">
              {{scope.row.startTime}}~{{scope.row.endTime}}
            </template>
          </el-table-column>
          <el-table-column prop="relatedUnit" label="关联单位"></el-table-column>
          <el-table-column prop="createTime" width="200" label="创建时间"></el-table-column>


          <el-table-column label="操作" align="center" width="380" fixed="right">
            <template v-slot="scope">
              <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="success" plain v-if="scope.row.status == '未启用'|scope.row.status == '未开始'" @click="updateEdit(scope.row.id,'进行中')">启用</el-button>
              <el-button size="mini" type="warning" plain v-if="scope.row.status == '进行中'" @click="updateEdit(scope.row.id,'已结束')">关闭</el-button>

              <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNum"
            :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
          </el-pagination>
        </div>
      </div>

    </el-card>
    <el-dialog title="评测" :visible.sync="fromVisible" width="60%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="form" label-width="130px" style="padding-right: 50px" :rules="rules" ref="formRef">
        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="年度" prop="year">
          <el-date-picker v-model="form.year" style="width: 100%;" type="year" format="yyyy" value-format="yyyy"
            placeholder="选择年度">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="开始日期" prop="startTime">
          <el-date-picker v-model="form.startTime" style="width: 100%;" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endTime">
          <el-date-picker v-model="form.endTime" style="width: 100%;" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否收集所写意见" prop="isCollect">
          <el-select style="width: 100%" v-model="form.isCollect">
            <el-option value="否" label="否"></el-option>
            <el-option value="是" label="是"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="评测人数限制" >
          <span style="margin-right: 10px;">公司领导</span>
          <el-input placeholder="" style="width:100px;margin-right: 10px;" v-model="form.limitCompanyLeaders"></el-input>
          <span style="margin-right: 10px;">基层领导</span>
          <el-input placeholder="" style="width:100px;margin-right: 10px;" v-model="form.limitBasicLeaders"></el-input>
          <span style="margin-right: 10px;">员工领导</span>
          <el-input placeholder="" style="width:100px" v-model="form.limitEmployee"></el-input>
        </el-form-item>
        <el-form-item label="是否匿名评测" prop="isAnonymous">
          <el-select style="width: 100%" v-model="form.isAnonymous">
            <el-option value="否" label="否"></el-option>
            <el-option value="是" label="是"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="填表说明" prop="instructions">
          <el-input placeholder="请输入" v-model="form.instructions" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import service from '@/request';

export default {
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      username: null,
      token: "",
      name: null,
      fromVisible: false,
      avatar: "",
      queryform: {

       
        current: 1,
        size: 10
      },
      license: "",
      form: {
        avatar: "",
        license: ""
      },
      user: {},
      rules: {

        cname: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],

        // business_id: [
        //     { required: true, message: '请选择商家类型', trigger: 'blur' },
        // ]
      },
      activeName: "",
      ids: [],
      sjlist: [],
    }
  },
  mounted() {

    this.getlist()
  },
  methods: {
    todetal(id){
this.$router.push({
  path:"/homeinfo",
  query:{
    id:id
  }
})
    },
    handleClick(e) {
      console.log(e)
     if(e.index !=="0"){
      this.queryform.status = this.activeName
    
     }else{
    delete  this.queryform.status
     }
      this.getlist()

    },

    updateEdit(id,e){
      let str=e == "进行中"?"启用":"关闭";
      this.$confirm(`是否确认${str}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await service.put("/evaluation",{
          id:id,
          status:e
        })
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: `${str}成功!`
          });
          this.getlist()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await service.delete(`/evaluation/${id}` )
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getlist()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    force(e) {
      this.form.timeRange = e;
      this.$forceUpdate();
    },
    handleEdit(row) {
      this.form = row;
      this.avatar = row.avatar;
      this.license = row.license;
      this.form.timeRange = row.time_range
      this.fromVisible = true
    },
    search() {
      this.queryform.current = 1;
      this.queryform.size = 10;
      this.getlist()
    },
    research() {
this.queryform={
  current: 1,
  size: 10
}
      this.getlist()

    },
    async getlist() {

      const res = await service.get("/evaluation/page", { params: this.queryform });
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }


    },
    add() {
      this.avatar = ""
      this.license = "";
      this.form = {}
      this.fromVisible = true

    },
    handleLicenseSuccess(e) {

    },
    async save() {
      
      if (!this.form.id) {
        this.form.status="未开始"
        const res = await service.post("/evaluation",this.form);
        if (res.code == 200) {
          this.fromVisible = false
          this.$message.success("操作成功")
          this.getlist()
        }
      } else {
        const res = await service.put("/evaluation",this.form);
        if (res.code == 200) {
          this.fromVisible = false
          this.$message.success("操作成功")
          this.getlist()
        }
      }




    },
    handleCurrentChange(e) {

    },
    handleAvatarSuccess(e) {
      console.log(e)
      this.avatar = e.data;
      console.log(this.form.avatar)
    },
    handleAvatarSuccess1(e) {

      this.license = e.data;
    }
  }
}
</script>
<style scoped>
.mb {
  margin-bottom: 10px;
}
</style>
<style>
.el-tabs__item.is-active {
  background: none !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.cardtab .el-tabs__item:first-child {
   background: #0d91D2 !important;
   color: #fff !important;
}
.cardtab .el-tabs__item:nth-child(2) {
   background: #F37A1D !important;
   color: #fff !important;
}
.cardtab .el-tabs__item:nth-child(3) {
   background: #3CB4F1 !important;
   color: #fff !important;
}
.cardtab .el-tabs__item:nth-child(4) {
   background:  #5EB85E !important;
   color: #fff !important;
}
.cardtab .el-tabs__item:nth-child(5) {
   background: #E6E6E6 !important;
   color: #000 !important;
}
</style>